<script setup>
import {ref, computed, onMounted, onUnmounted, watch} from 'vue'

// 定义组件的 props
const props = defineProps({
  // 图片数据
  data: {
    type: Array,
    required: true,
  },
  // 每次加载的图片数量
  size: {
    type: Number,
    default: 20,
  },
  // 列数
  column: {
    type: Number,
    default: 4,
    validator: (value) => value >= 1 && value <= 6, // 限制列数范围
  },
})
const emit = defineEmits(["click"]);

// 当前加载的图片数量
const loadedCount = ref(0)

// 加载更多图片
const loadMoreImages = () => {
  const nextCount = loadedCount.value + props.size
  loadedCount.value = Math.min(nextCount, props.data.length)
}

// 监听滚动到底部
let observer = null
const initIntersectionObserver = () => {
  const target = document.querySelector('.load-more-trigger')
  if (!target) return

  observer = new IntersectionObserver(
      (entries) => {
        if (entries[0].isIntersecting) {
          loadMoreImages()
        }
      },
      {threshold: 1.0}
  )
  observer.observe(target)
}

// 图片加载错误处理
const handleImageError = (index) => {
  console.error(`Image at index ${index} failed to load`)
  // 可以在这里处理错误，比如替换为默认图片
}

// 动态计算列数样式
const gridStyle = computed(() => {
  return {
    gridTemplateColumns: `repeat(${props.column}, 1fr)`,
  }
})

watch(props.data, (newData) => {
  console.log("数据变化了", newData);
  loadMoreImages()
})

// 初始化
onMounted(() => {
  loadMoreImages() // 初始加载一批图片
  initIntersectionObserver()
})

// 清理
onUnmounted(() => {
  if (observer) observer.disconnect()
})
</script>

<template>
  <div class="swiper-vertical" :style="gridStyle">
    <!-- 渲染已加载的图片 -->
    <div
        v-for="(url, index) in data.slice(0, loadedCount)"
        :key="index"
        class="image-item"
    >
      <div class="image-wrapper" @click="emit('click', url)">
        <img
            :src="url"
            loading="lazy"
            alt="网络图片"
            class="image"
            @error="handleImageError(index)"
        />
      </div>
    </div>

    <!-- 滚动到底部时触发加载更多 -->
    <div class="load-more-trigger"></div>
  </div>
</template>

<style scoped>
/* 容器样式 */
.swiper-vertical {
  display: grid;
  gap: 24px;
  padding: 24px;
}

/* 图片容器样式 */
.image-item {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(52, 152, 219, 0.2), /* 浅蓝色阴影 */ 0 6px 12px rgba(41, 128, 185, 0.3), /* 中蓝色阴影 */ 0 12px 24px rgba(25, 102, 166, 0.4); /* 深蓝色阴影 */
  transition: box-shadow 0.3s ease;
}

.image-item:hover {
  box-shadow: 0 6px 10px rgba(52, 152, 219, 0.3), /* 浅蓝色阴影（更亮） */ 0 10px 20px rgba(41, 128, 185, 0.4), /* 中蓝色阴影（更亮） */ 0 20px 40px rgba(25, 102, 166, 0.5); /* 深蓝色阴影（更亮） */
}

/* 图片包装器 */
.image-wrapper {
  width: 100%;
  /* aspect-ratio: 1 / 1; /* 保持图片为正方形 */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f5f5; /* 图片加载前的背景色 */
}

/* 图片样式 */
.image {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 图片填充容器 */
}

/* 加载更多触发器 */
.load-more-trigger {
  height: 1px;
  visibility: hidden;
}
</style>